<template>
  <div class="wrapper">
    <div class="baner">
      <banner/>
    </div>
    <div class="container commw">
        <div class="titlewaper">
          <div>
            <p class="infotile">{{$t('index.namv')[3]}}</p>
          </div>
        </div>
        <div class="navinfowaper">
          <!-- <div v-html="richText"></div> -->
           <div class="detail-con">
            <div class="detail-center">
            <div class="detail-con-o">
              <div :class="{'detail-con-ch':index%2==0,'ch1-con':index%2!==0}" v-for="(item,index) in richText" :key="index">
                <h1 style="font-size: 46px; margin-bottom: 8px" :id="'about'+index">{{item.title}}</h1>
                <span style="font-size: 18px" v-html="item.content"></span>
                <div class="subwaoper" v-if="item.list">
                    <div class="activity-con">
                      <div class="activity-con-item"   v-for="(subitem,index) in item.list"  :key="index" @click="detailPage(subitem,item.contentType)">
                        <a>
                          <img class="activity-con-item-pic" :src="subitem.image"/>
                        </a>
                        <div class="activity-con-item-tit" ><a>{{subitem.title}}</a></div>
                        <h3 class="activity-con-item-con">
                          <div v-html="item.content"></div>
                        </h3>
                      </div>
                    </div>
                </div>
              </div>
            </div>




    </div>
    </div>
        </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import  banner  from "~/components/banner";
import {
    getRichTextApi,queryPositionCodeList
} from "~/assets/js/api";
//temp1
export default {
  components: {banner},
  props: {
    propE: {
        type: Object,
        default: function () {
            return {message:'hello'}
        }
    }
  },
  data() {
    return {
        richText:''
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['locale'])
  },
  methods: {
    handelInvite(type){
        //handelInvite path: "/login"
        this.$router.push({ path: '/partnerRecruitment', query: { type: type} })
    },
    getinfo(){
      //queryPositionCodeList()
      getRichTextApi({code:'about_publishing_group'}).then((res)=>{
          this.richText=res.data.list||[];
      }).catch((err)=>{
        console.log(err)
      })
    },
    mousemoveBg(){
        const container = document.querySelector('.wrapper');
        container.addEventListener('mousemove', function(event) {
            const mouseX = event.clientX;
            const mouseY = event.clientY;
            const bgX = -mouseX * 0.01;  // 根据需求重新计算图片坐标
            const bgY = -mouseY * 0.01;
            container.style.backgroundPosition = `${bgX}px ${bgY}px`;
        });
        var imgs = document.querySelectorAll('.myImage');
        imgs.forEach(function(img){
            img.addEventListener('mouseover', function(e) {
                    this.classList.add('rotateIn');

            });
            img.addEventListener('mouseout', function(e) {
                this.classList.add('rotateIn');
                this.classList.remove('rotateIn');

            });
        })

    },
    joinchuban(){
        this.$router.push({ path: '/joinus'})
    }
  },
  created() {},
  mounted() {
    this.getinfo()
  }
};
</script>
<style lang="less" scoped>
.wrapper{
    // background: url("@/static/image/banner1.png") no-repeat;
    background-size: 102% 750px;
    min-height: 1050px;
    //background-color: rgb(247, 247, 247);

    padding-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Arial";
}
.baner{
  width: 100%;
}
.container {
    margin: 0 auto;
    width: 1280px !important;
    position: relative;
}
.container:before{
    content:'';
    display:table;
}
.mian{
    width: 100%;
    border: 1px solid blue;
}
.commw{
    max-width: 75%;
}
.joinButton{
    border: none;
    background-color: #007CBB;
    color: #fff;
    text-align: center;
    padding: 8px 15px;
    border-radius: 0.25rem !important;
    cursor: pointer;
    font-size: 14px;
}
.joinButton:hover {
    text-decoration: none;
    background-color:#52b1e0;
    transition: all 0.5s ease;
}
.titlewaper{
  min-height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .infotile{
    margin: 0px;
    font-size: 32px;
    color: #000;
  }
}
.navinfowaper{
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  word-break: break-all !important;
  p{
    margin: 0px;
  }
  .navinfoitem{
    width: 31%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 18px;
    margin-bottom: 24px;
    text-align: left;
  }
  .imgaewaper{
    width: 100%;
    overflow: hidden;
    height: 210px;
    img {
      transition: transform 0.4s ease; /* 平滑的放大效果 */
      max-width: 100%; /* 限制图片最大宽度 */
      height: auto; /* 保持图片比例 */
    }
  }
  .imgaewaper:hover img {
    transform: scale(1.06); /* 放大10% */
  }
  .chu-title{
    color: #000;
    font-size: 16px;
    margin: 10px 0px;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .intro{
    color: #888;
  }
}


</style>
